<template>
  <van-tabbar v-model="active">
    <van-tabbar-item icon="bars" islink to="/">列表</van-tabbar-item>
    <van-tabbar-item icon="share" islink to="/layout/export/0">导出</van-tabbar-item>
    <van-tabbar-item icon="setting-o" islink to="/layout/setting">设置</van-tabbar-item>
  </van-tabbar>
</template>
<script>
import vanTabbar from "vant/lib/tabbar";
import vanTabbarItem from "vant/lib/tabbar-item";
import "vant/lib/tabbar/style";
import "vant/lib/tabbar-item/style";
export default {
  name: "tabbar",
  components: {
    vanTabbar,
    vanTabbarItem
  },
  data() {
    return {
      active: 0
    };
  },
  watch: {
    $route: {
      handler(to) {
        if (to.path === '/layout/list') {
          this.active = 0
        } else if (to.path.startsWith('/layout/export')) {
          this.active = 1
        } else if (to.path === '/layout/setting') {
          this.active = 2
        }
      },
      immediate: true
    }
  }
};
</script>
